<template>
    <div class="avatar-container">
        <div class="avatar">
            <img :src="avatarImg" alt="" srcset="" />
        </div>
        <div class="name">铁牛子</div>
    </div>
</template>
<script>
    import avatarImg from "@/assets/images/my/avatar.png";
    export default {
        data() {
            return {
                avatarImg,
            };
        },
    };
</script>
<style lang="scss" scoped>
    .avatar-container {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .name {
            margin-left: 10px;
            color: #fff;
            font-size: 12px;
        }
    }
</style>